/**
 * useState 练习 - 京东商品图切换效果
 */
import React, { useState } from 'react'
import './GoodsImage.css';

export default function GoodsImage() {
  //声明状态
  let [index, setIndex] = useState(0);
  //声明一个数组
  let imageArr = [
    "/goods/1.jpg",
    "/goods/2.jpg",
    "/goods/3.jpg",
    "/goods/4.jpg",
    "/goods/5.jpg",
  ];
  //声明 onmouseover 的事件回调
  let changeIndex = (index) => {
    //返回一个函数
    return () => {
      setIndex(index);
    }
  }

  return (
    <div className='goods-image'>
      <div className="big-image">
        <img src={imageArr[index]} alt="" />
      </div>
      <div className="small-images">
        {
          imageArr.map((item, ind) => {
            return <div className="item" key={ind} onMouseEnter={changeIndex(ind)}>
              <img className={ind === index ? 'active' : ''} src={item} alt='' />
            </div>
          })
        }
      </div>
    </div>
  )
}
